<script setup>
const goToNoNavbarPage = () => {
	uni.navigateTo({
		url: '/pages/about/about',
		success: () => {
			console.log('跳转成功')
		},
		fail: (err) => {
			console.log('跳转失败')
		}
	})
}
</script>



<template>
  <view class="container round">
    <h1 class="title">&nbsp;&nbsp;研究院简介</h1>
    <div class="span-top image-container">
      <img class="image round" src="@/static/testImage.jpg" alt="图片">
      <h2 class="overlay-text">山东石油化工学院空天信息研究院山东石油化工学院空天信息研究院山东石油化工学院空天信息研究院</h2>
    </div>
	<div class="span-top text-container">
		<p class="text">山东石油化工学院能源空天信息研究院于2025年2月21日成立，位于山东省东营市，是我国第二大油田胜利油田所在地。依托山东石油化工学院，研究院聚焦"能源+空天+信息"深度融合，面向国家"双碳"战略、能源安全与空天技术发展需求。</p>
		<p class="goto-about span-top" @click="goToNoNavbarPage">查看更多&nbsp;></p>
	</div>
  </view>
</template>

<style scoped>
.container {
  width: 100%;
  padding: 10px 10px;
  box-sizing: border-box;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.title {
  border-left: 5px solid rgb(30, 66, 159);
  color: rgb(30, 66, 159);
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 10px;
}

.round {
  border-radius: 10px;
}

.span-top {
	margin-top: 10px;
}



.image-container {
  position: relative;
  width: 100%;
  height: 200px;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay-text {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap; 
  text-overflow: ellipsis;
}

.text, .goto-about {
	font-size: 13px;
	line-height: 20px;
}

.goto-about {
	color: rgb(28, 100, 242);
}
.goto-about:active {
	color: rgb(119, 196, 254);
}
</style>